<template>
  <div class="ecommerce" :style="{ height: containerMinHeight}">
    <el-row :gutter="20">
      <el-col :md="24" :lg="8">
        <Tree @node-click="handleNodeClick"/>
      </el-col>
      <el-col :md="24" :lg="16" class="no-margin-bottom">
<!-- 		<div class="card art-custom-card" :style="{ height: containerMinHeight  }">
			<div class="card-header" style="display: flex;justify-content: space-between;align-items: center;">
			    <div>
			      <i class="iconfont-sys">&#xe67b;</i>
			      <span>配置</span>
			    </div>
			</div>
			<div>
				<el-tabs style="height: 200px" class="demo-tabs">
				    <el-tab-pane label="SQL配置">
						<SQL></SQL>
					</el-tab-pane>
				    <el-tab-pane label="Config">Config</el-tab-pane>
				    <el-tab-pane label="Role">Role</el-tab-pane>
				    <el-tab-pane label="Task">Task</el-tab-pane>
				</el-tabs>  
			</div>
		</div> --> 
		  

		  
        <Table :meta="meta" v-if="meta?.type=='table'" />
		<Form :meta="meta" v-else-if="meta?.type=='form'" />
		<Query :meta="meta" v-else-if="meta?.type=='query'" />
		<Guide v-else></Guide>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import Tree from './widget/Tree.vue'
  import Table from './widget/Table.vue'
  import Form from './widget/Form.vue'
  import Query from './widget/Query.vue'
  import Guide from './widget/Guide.vue'
  
  import { useCommon } from '@/composables/useCommon'
  const { containerMinHeight } = useCommon()
  defineOptions({ name: 'Ecommerce' })
  
  const meta=ref<any>();
  
  const handleNodeClick=(data:any)=>{
	  meta.value=data
	  console.log(meta.value);
  }
  
</script>

<style lang="scss" scoped>
  @use './style';
</style>
